import { Space, Table } from 'antd';
import type { TableProps } from 'antd';
import { useEffect, useState } from 'react';
import request from '../../api/request'
import { Button, Modal } from 'antd';
import type { FormProps } from 'antd';
import { Checkbox, Form, Input } from 'antd';
function Home() {
    interface DataType {
        key: string;
        title: string;
        id: number;
        content: string;
        updatedAt: string;
        tags: string[];
    }
    type FieldType = {
        title: string;
        content: string;
    };
    type FieldType1 = {
        title: string;
    };

    const [added, setAdded] = useState(false)
    const [data, setData] = useState('')
    const [Total, setTotal] = useState(1)
    const [title, setTitle] = useState('')
    const getList = async (title) => {
        const res = await request.get('article/list', {
            params: {
                page: 1,//页码
                pageSize: 6,
                keyword:title
            }
        })
        // console.log(res);
        setData(res.data.rows)
        setTotal(res.data.count)


    }
    useEffect(() => {
        getList()
    }, [])

    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        ,
        {
            title: 'firstname',
            dataIndex: 'title',
            key: 'title',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'username',
            dataIndex: 'content',
            key: 'content',
        },
        {
            title: 'lastname',
            dataIndex: 'updatedAt',
            key: 'updatedAt',
        },
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },

        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    {/* <a>Invite {record.name}</a> */}
                    <a>Delete</a>
                    <button onClick={() => editlist(record)}>编辑</button>
                </Space>
            ),
        },
    ];

    const [editId, setEditId] = useState('')
    const editlist = (record) => {
        console.log(record);
        setIsModalOpen(true)
        setEditId(record.id)
        form.setFieldsValue(record)
        setAdded(false)
    }
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        console.log('Success:', values);
        if (added) {
            const res = await request.post('/article', { ...values, authorId: 47529555 })
            console.log(res);
            getList()
            setIsModalOpen(false)
        }
        else {
            const res1 = await request.put(`article/${editId}`, values)
            console.log(res1);
            getList()
            setIsModalOpen(false)
        }
    };
    const [form] = Form.useForm();
    // 新增按钮
    const addlist = () => {
        setIsModalOpen(true)
        setAdded(true)
        form.resetFields();
    }
    const searonFinish: FormProps<FieldType1>['onFinish'] = (values) => {
        console.log('Success:', values);
        let { title } = values
        getList(title)
    };

    return (
        <div>
            <div style={{float:'right'}}>
                <Form
                layout='inline'
                    form={form}
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={searonFinish}

                    autoComplete="off"
                >
                    <Form.Item<FieldType>
                        label="firstname"
                        name="title"

                    >
                        <Input />
                    </Form.Item>


                    <Form.Item label={null}>
                        <Button type="primary" htmlType="submit">
                         搜索
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <Button onClick={() => addlist()} type="primary" autoInsertSpace={false}>
                确定
            </Button>
            <Table<DataType> columns={columns} dataSource={data} />;
            <div>
                <Modal
                    title={added ? '新增' : '编辑'}
                    closable={{ 'aria-label': 'Custom Close Button' }}
                    open={isModalOpen}
                    onOk={handleOk}
                    onCancel={handleCancel}
                >
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}

                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            label="username"
                            name="title"

                        >
                            <Input />
                        </Form.Item>

                        <Form.Item<FieldType>
                            label="firstname"
                            name="content"

                        >
                            <Input />
                        </Form.Item>


                        <Form.Item label={null}>
                            <Button type="primary" htmlType="submit">
                               ok
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    )
}

export default Home
